.profile-card {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border: none;

  // 滚动条容器（保持原逻辑）
  :deep(.info-scrollbar) {
    max-height: calc(100vh - 160px);
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

  // 【正确方案】完全按照官方文档示例实现
  :deep(.info-descriptions) {
    // label单元格背景色
    .el-descriptions__label {
      background-color: #fafafa;
    }

    // label内容容器（按官方示例）
    .cell-item {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
        color: #409eff;
      }
    }

    // content内容样式
    .el-descriptions__content {
      color: #303133;
      font-size: 15px;
    }

    // 边框颜色
    .el-descriptions__cell {
      border-color: #f0f0f0;
    }
  }

  // 编辑模式表单（按官方标准）
  :deep(.info-form) {
    width: 100%;
    
    .el-form-item {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      // Form label容器（和Descriptions保持一致）
      .form-label-item {
        display: flex;
        align-items: center;  // 垂直居中对齐
        
        .el-icon {
          margin-right: 8px;
          font-size: 16px;
          color: #409eff;
        }
      }
      
      .el-input, .el-date-picker {
        --el-input-font-size: 15px;
        width: 100%;
        max-width: 500px;
      }
      
      .el-textarea {
        --el-textarea-font-size: 15px;
        width: 100%;
        max-width: 600px;
      }
    }
  }
}

// 左侧头像列（保持原逻辑）
.avatar-column {
  display: flex;
  justify-content: center;
  padding-top: 20px !important;
}
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 200px;
}
.avatar-uploader {
  margin-bottom: 24px;
}
.avatar {
  width: 160px;
  height: 160px;
  border: 4px solid #f5f7fa;
  transition: all 0.3s ease;
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
}
.avatar-upload-icon {
  width: 160px;
  height: 160px;
  font-size: 48px;
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  &:hover {
    background-color: #e9ecef;
  }
}

// 上传状态（保持原逻辑）
.upload-status {
  display: flex;
  align-items: center;
  color: #409eff;
  font-size: 14px;
  margin-bottom: 16px;
  .loading-icon {
    margin-right: 6px;
    animation: rotating 2s linear infinite;
  }
}

// 模式切换（保持原逻辑）
.mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  .mode-text {
    font-size: 16px;
    font-weight: 500;
    color: #606266;
  }
}

// 右侧信息列（保持原逻辑）
.info-column {
  padding: 10px 20px !important;
}
.info-content {
  width: 100%;
  padding: 10px 0;
}

// 标题（保持原逻辑）
.info-header {
  margin-bottom: 24px;
  .info-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
  }
}

// 按钮（保持原逻辑）
.action-buttons {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  .edit-btn, .save-btn, .cancel-btn {
    padding: 8px 20px;
    font-size: 14px;
    el-icon {
      margin-right: 6px;
    }
  }
}

// 动画（保持原逻辑）
@keyframes rotating {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// ============ 暗黑模式适配 ============
:global(.dark) {
  .profile-page {
    color: #e5eaf3;
  }

  .profile-card {
    background-color: #1e1e1e;
    border-color: #303030;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }

  // 只读模式 - Descriptions（增强优先级）
  .profile-card :deep(.info-descriptions) {
    background-color: #1e1e1e;
    
    .el-descriptions__label {
      background-color: #252525 !important;
      color: #b3b3b3 !important;
    }

    .el-descriptions__content {
      background-color: #1e1e1e !important;
      color: #e5eaf3 !important;
      font-size: 15px;
    }

    .el-descriptions__cell {
      border-color: #303030 !important;
    }

    .cell-item {
      color: #b3b3b3;
      
      .el-icon {
        color: #42d392;
      }
    }
  }

  // 编辑模式 - Form
  .profile-card :deep(.info-form) {
    .form-label-item {
      color: #b3b3b3;

      .el-icon {
        color: #42d392;
      }
    }
  }

  // 头像区域
  .avatar {
    border-color: #303030;
  }

  .avatar-upload-icon {
    background-color: #252525;
    color: #666;

    &:hover {
      background-color: #2a2a2a;
    }
  }

  // 上传状态
  .upload-status {
    color: #42d392;
  }

  // 模式切换
  .mode-switch {
    .mode-text {
      color: #e5eaf3 !important;
      font-weight: 500;
    }

    // 开关组件在暗黑模式下的优化
    :deep(.el-switch) {
      .el-switch__core {
        border-color: #4f4f4f;
        background-color: #4f4f4f;
      }

      &.is-checked .el-switch__core {
        border-color: #42d392;
        background-color: #42d392;
      }
    }
  }

  // 标题（增强优先级）
  .info-header {
    .info-title {
      color: #e5eaf3 !important;
      border-bottom-color: #303030 !important;
    }
  }

  // 确保h2标题可见（额外保险）
  .profile-card .info-header h2,
  .profile-card h2.info-title {
    color: #e5eaf3 !important;
  }

  // 按钮文字
  .action-buttons {
    .edit-btn, .save-btn, .cancel-btn {
      color: #fff;
    }
  }
}

// 响应式（保持原逻辑）
@media (max-width: 768px) {
  .avatar-column, .info-column {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .avatar {
    width: 120px;
    height: 120px;
  }
  .avatar-upload-icon {
    width: 120px;
    height: 120px;
  }
  .info-form .el-input, .info-form .el-date-picker, .info-form .el-textarea {
    max-width: 100%;
  }
}
